<template>
    <div>
      <div class="opt-area-02">
        <div class="right-con">
            <div class="input-frame" style="width: 164px">
              <Input type="text"  placeholder="请输入姓名" style="width: 164px" v-model="params.name"
                    icon="ios-search"/>
            </div>
            <div class="input-frame" style="width: 164px">
              <Input type="text"  placeholder="请输入身份证号" style="width: 164px" v-model="params.card_no"
                    icon="ios-search"/>
            </div>
            <div class="input-frame" style="width: 164px">
              <Input type="text"  placeholder="请输入联系方式" style="width: 164px" v-model="params.tel"
                    icon="ios-search"/>
            </div>
            <!-- <div class="input-frame" style="width: 164px">
              <Select v-model="params.isfollow" placeholder="密切接触人群" style="width: 164px">
                <Option value="">全部</Option>
                <Option value="0">否</Option>
                <Option value="1">是</Option>
                <Option value="2">按行动轨迹主动申请隔离人员</Option>
              </Select>
            </div> -->
            <div class="input-frame" style="width: 164px">
              <Select v-model="params.supervise_start_now" placeholder="当前管控状态" filterable>
                <Option v-for="obj in superviseDictListnow" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
              </Select>
            </div>
            <div class="input-frame" style="width: 164px">
              <Select v-model="params.supervise_start_old" placeholder="变更前管控状态" filterable>
                <Option v-for="obj in superviseDictListold" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
              </Select>
            </div>
            <div class="input-frame" style="width: 164px">
              <Select v-model="params.supervise_start_new" placeholder="变更后管控状态" filterable>
                <Option v-for="obj in superviseDictList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
              </Select>
            </div>
            <Button type="info" size="small" @click="findList()" style="margin-top: 5px">搜索</Button>
          </div>
        <div class="right-con">
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.user_control_type1" @on-change="changeuserControlType1()" placeholder="人员类型（一级）">
              <Option v-for="obj in userControlType1" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px" v-if="userControlType2.length > 0">
            <Select v-model="params.user_control_type2"  placeholder="人员类型（二级）">
              <Option v-for="obj in userControlType2" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.area1" placeholder="区/县" filterable @on-change="perChange(1)">
              <Option v-for="obj in addressInfo.list1" :value="obj.company_code" :key="obj.id">{{obj.title}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.area2" placeholder="街道" filterable @on-change="perChange(2)">
              <Option v-for="obj in addressInfo.list2" :value="obj.company_code" :key="obj.id">{{obj.title}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.area3" placeholder="社区" filterable>
              <Option v-for="obj in addressInfo.list3" :value="obj.company_code" :key="obj.id">{{obj.title}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
              <DatePicker v-model="params.time" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end" placeholder="请选择时间" style="width: 164px"></DatePicker>
            </div>
        </div>
        <!-- <div class="right-con">
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.supervise_start_new" placeholder="当前管控状态" filterable>
              <Option v-for="obj in superviseDictList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.supervise_start_old" placeholder="历史管控状态" filterable>
              <Option v-for="obj in superviseDictList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.arrive_address_type" placeholder="来沈前经过地" filterable>
              <Option v-for="obj in dictList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
            </Select>
          </div>
        </div> -->
      </div>
      <Table  border :columns="columns" :data="DataList" :loading="loading">
        <template slot-scope="{ row }" slot="nucleic_acid">
          <span v-if="row.nucleic_acid == '0'">未检测</span>
          <span v-if="row.nucleic_acid == '1'">已检测</span>
        </template>
        <template slot-scope="{ row }" slot="isolation">
          <span v-if="row.isolation == '0'">否</span>
          <span v-if="row.isolation == '1'">是</span>
        </template>
        <template slot-scope="{ row }" slot="illness_state">
          <span v-if="row.illness_state == '1'" style="color: red">疑似病例</span>
          <span v-if="row.illness_state == '2'" style="color: red">确诊病例</span>
          <span v-if="row.illness_state == '3'" style="color: red">死亡</span>
          <span v-if="row.illness_state == '4'" >治愈</span>
          <span v-if="row.illness_state == '5'" >正常</span>
        </template>
        <template slot-scope="{ row }" slot="inout_state">
          <span v-if="row.inout_state == '1'">来沈人员</span>
          <span v-if="row.inout_state == '2'">离沈人员</span>
        </template>
        <!--            <template slot-scope="{ row }" slot="hot">-->
        <!--              <span v-if="row.hot == '1'" style="color: red">发热</span>-->
        <!--              <span v-else>未发热</span>-->
        <!--            </template>-->
        <template slot-scope="{ row }" slot="referral">
          <span v-if="row.referral == '1'">已送诊</span>
          <span v-else style="color: red">未送诊</span>
        </template>
        <template slot-scope="{ row }" slot="state">
          <span v-if="row.state == '1'">在家留观</span>
          <span v-if="row.state == '2'">集中留观</span>
        </template>
        <template slot-scope="{ row }" slot="isfollow">
          <span v-if="row.isfollow == '1'" style="color: red">是</span>
          <span v-else>否</span>
        </template>
        <template slot-scope="{ row }" slot="supervise_timeout">
          <span v-if="row.supervise_timeout == '0'">正常</span>
          <span v-if="row.supervise_timeout == '1'" style="color: red">预警</span>
        </template>
        <template slot-scope="{ row }" slot="detection_1_result">
          <span v-if="row.detection_1_result == '1'">阴性</span>
          <span v-if="row.detection_1_result == '2'" style="color: red">阳性</span>
          <span v-if="row.detection_1_result == '3'">待出结果</span>
          <span v-if="row.detection_1_result == '4'">未检测</span>
        </template>
        <template slot-scope="{ row }" slot="detection_2_result">
          <span v-if="row.detection_2_result == '1'">阴性</span>
          <span v-if="row.detection_2_result == '2'" style="color: red">阳性</span>
          <span v-if="row.detection_2_result == '3'">待出结果</span>
          <span v-if="row.detection_2_result == '4'">未检测</span>
        </template>
        <template slot-scope="{ row }" slot="follow_level">
          <span v-if="row.follow_level == '1'">一级密接</span>
          <span v-if="row.follow_level == '2'">二级密接</span>
          <span v-if="row.follow_level == '3'">三级密接</span>
        </template>
        <template slot="action" slot-scope="{ row }">
          <Row style="margin-bottom: 5px; margin-top: 2px">
            <Button class="table-action-btn" type="info" size="small" @click="showdetail(row, 'info')">详情</Button>
          </Row>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page_style">
        <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
              show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
      </Row>
    </div>
</template>

<script>
import { findJcglList, date0str } from '../../../api/yi-qing-fang-kong'
import { getDictList } from '../../../api/common'
import { grid_downlist } from '@/api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      columns: [
        { title: 'ID', key: 'id', width: 150, align: 'center' },
        { title: '姓名', key: 'name', width: 100, align: 'center' },
        { title: '联系方式', key: 'tel', width: 120, align: 'center' },
        { title: '身份证号', key: 'TMcardno', width: 160, align: 'center' },
        { title: '性别', key: 'sex', width: 80, align: 'center' },
        { title: '人员类型（一级）', key: 'xgc_usercontroltype_dict', width: 120, align: 'center' },
        { title: '人员类型（二级）', key: 'xgc_usercontroltype_all_dict', width: 120, align: 'center' },
        // { title: '核酸检测', slot: 'nucleic_acid', width: 100, align: 'center' },
        // { title: '第一次检测结果', slot: 'detection_1_result', width: 100, align: 'center' },
        // { title: '第二次检测结果', slot: 'detection_2_result', width: 100, align: 'center' },
        // { title: '是否居家隔离', slot: 'isolation', width: 120, align: 'center' },
        // { title: '人员状态', slot: 'illness_state', width: 100, align: 'center' },
        // { title: '离沈状态', slot: 'inout_state', width: 100, align: 'center' },
        { title: '当前管控状态', key: 'supervise_start3', width: 100, align: 'center' },
        { title: '变更前管控状态', key: 'supervise_start1', width: 100, align: 'center' },
        { title: '变更后管控状态', key: 'supervise_start2', width: 100, align: 'center' },
        { title: '变更时间', key: 'create_time', width: 100, align: 'center' },
        // { title: '居家隔离状态', key: 'is_transfer', width: 100, align: 'center' },
        { title: '本次管控开始日期', key: 'supervise_time', width: 100, align: 'center' },
        { title: '集中隔离开始日期', key: 'olation_time', width: 100, align: 'center' },
        { title: '预警状态', slot: 'supervise_timeout', width: 100, align: 'center' },
        { title: '预警时间', key: 'supervise_day', width: 100, align: 'center' },
        // { title: '发热状态', slot: 'hot', width: 100, align: 'center' },
        // { title: '送诊状态', slot: 'referral', width: 100, align: 'center' },
        // { title: '隔离状态', slot: 'state', width: 100, align: 'center' },
        { title: '密切接触人群(是/否)', slot: 'isfollow', width: 100, align: 'center' },
        { title: '密接相关人', key: 'follow_person', width: 100, align: 'center' },
        { title: '密接等级', slot: 'follow_level', width: 100, align: 'center' },
        // { title: '剩余安全观察期日期', key: 'safe_date', width: 150, align: 'center' },
        { title: '来沈前经过地', key: 'arrive_address_type1', width: 120, align: 'center' },
        { title: '来沈前出发地省', key: 'originate_province', width: 130, align: 'center' },
        { title: '来沈前出发地市', key: 'originate_city', width: 130, align: 'center' },
        { title: '区、县(市)', key: 'area', width: 80, align: 'center' },
        { title: '街道(乡镇)', key: 'street', width: 80, align: 'center' },
        { title: '社区(村)', key: 'community', width: 100, align: 'center' },
        { title: '录入社区', key: 'company_name', width: 100, align: 'center' },
        { title: '录入时间', key: 'create_time', width: 200, align: 'center' },
        // { title: '来沈时间', key: 'arrive_time', width: 200, align: 'center' },
        { title: '具体地址', key: 'address', minWidth: 250, align: 'center' },
        { title: '操作', align: 'center', width: 160, slot: 'action', fixed: 'right' }
      ],
      DataList: [],
      userControlType2: [],
      userControlType1: [],
      loading: false,
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        name: '',
        cardno: '',
        tel: '',
        time: ['', ''],
        begin_time: '',
        end_time: '',
        supervise_start_new: '',
        supervise_start_old: '',
        isfollow: '',
        arrive_address_type: '',
        area1: '',
        area2: '',
        area3: ''
      },
      dictList: [],
      getDictList: [],
      addressInfo: { list1: [], list2: [], list3: [] },
      superviseDictList: [],
      superviseDictListnow: [],
      superviseDictListold: []
    }
  },
  methods: {
    init () {
      if (this.params.area3 === '' && this.params.area2 === '') {
        this.params.company_code = this.params.area1
      } else if (this.params.area2 !== '' && this.params.area3 === '') {
        this.params.company_code = this.params.area2
      } else if (this.params.area1 === '' && this.params.area2 === '' && this.params.area3 === '') {
        this.params.company_code = ''
      } else if (this.params.area1 !== '' && this.params.area2 !== '' && this.params.area3 !== '') {
        this.params.company_code = this.params.area3
      }
      let data = this.params
      if (data.time[0] !== '') {
        this.params.begin_time = date0str(data.time[0])
      }
      if (data.time[1] !== '') {
        this.params.end_time = date0str(data.time[1])
      }
      this.loading = true
      findJcglList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.DataList = ret.data.data.results
          this.DataList.forEach(item => {
            for (var i = 0; i < this.dictList.length; i++) {
              if (item.arrive_address_type === this.dictList[i].value) {
                item.arrive_address_type1 = this.dictList[i].label
              }
            }
            for (var j = 0; j < this.superviseDictListold.length; j++) {
              if (item.supervise_start === this.superviseDictListold[j].value) {
                item.supervise_start1 = this.superviseDictListold[j].label
              }
              if (item.to_supervise_start === this.superviseDictListold[j].value) {
                item.supervise_start2 = this.superviseDictListold[j].label
              }
              if (item.supervise_start_now === this.superviseDictListold[j].value) {
                item.supervise_start3 = this.superviseDictListold[j].label
              }
            }
          })
          this.loading = false
        } else {
          this.loading = false
          this.$Notice.error({ title: '查看失败', desc: ret.data.errmsg })
        }
      })
    },
    showdetail (row, what) {
      this.$router.push({
        path: '/yi-qing/add',
        query: {
          id: row.id,
          what: what,
          arrive_address_type: row.arrive_address_type,
          user_type: this.params.user_type
        }
      })
    },
    perChange (index) {
      let temparea = this.params['area' + index]
      if (!temparea) {
        return
      }
      let templist = this.addressInfo['list' + index]
      let tempdata = {}
      for (let i = 0; i < templist.length; i++) {
        if (temparea === templist[i].company_code) {
          tempdata = templist[i]
        }
      }
      this.getDownAddress(tempdata.id, index + 1)
    },
    // 下拉搜索框的级联查询
    getDownAddress (pid, index) {
      let param = {
        pid: pid,
        pageNo: 1,
        pageSize: 200
      }
      grid_downlist(param).then(res => {
        if (res.data.data) {
          this.addressInfo['list' + index] = res.data.data.results
          let obj = {
            id: '',
            level: '',
            mapjson: '',
            path: '',
            pid: 0,
            title: '全部',
            company_code: ''
          }
          this.addressInfo['list' + index].unshift(obj)
          this.perChange(index)
        } else {
          this.$Notice.error({ title: '查看失败', desc: '查询地址信息失败' })
        }
      })
    },
    changeuserControlType1 () {
      let param = {
        pageNo: 1,
        pageSize: 60,
        type: 'xgc_usercontroltype' + this.params.user_control_type1
      }
      getDictList(param).then(res => {
        if (res.data.errcode === 0) {
          this.userControlType2 = res.data.data.results
          if (this.userControlType2.length > 0) {
            let dic = { 'label': '全部', 'value': '' }
            this.userControlType2.unshift(dic)
          }
        } else {
          this.$Notice.error({ title: '查询失败' })
        }
      })
    },
    geteuserControlType () {
      let param = {
        pageNo: 1,
        pageSize: 60,
        type: 'xgc_usercontroltype' + this.params.user_control_type1
      }
      getDictList(param).then(res => {
        if (res.data.errcode === 0) {
          this.userControlType2 = res.data.data.results
          if (this.userControlType2.length > 0) {
            let dic = { 'label': '全部', 'value': '' }
            this.userControlType2.unshift(dic)
          }
        } else {
          this.$Notice.error({ title: '查询失败' })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    findList () {
      this.params.pageNo = 1
      this.init()
    },
    disposeTime (e) {
      var y = e.getFullYear()
      var m = e.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      var d = e.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },
    getDict () {
      var dic = { 'label': '全部', 'value': '' }
      getDictList({ type: 'arrive_address_type', pageSize: 60, pageNo: 1 }).then(res => {
        if (res.data.errcode === 0) {
          let obj = {
            value: '',
            label: '全部'
          }
          let obj1 = {
            value: '999',
            label: '空'
          }
          let obj2 = {
            value: '3',
            label: '其他'
          }
          this.dictList = res.data.data.results
          this.dictList.splice(0, 0, obj)
          this.dictList.push(obj1)
          this.dictList.push(obj2)
          // setTimeout(function () {
          //   that.selectlist()
          // }, 500)
        } else {
          this.$Notice.error({ title: '查询失败' })
        }
      })
      getDictList({ type: 'xgc_usercontroltype', pageSize: 60, pageNo: 1 }).then(res => {
        if (res.data.errcode === 0) {
          this.userControlType1 = res.data.data.results
          this.userControlType1.forEach((item, index) => {
            getDictList({ type: 'xgc_usercontroltype' + item.value, pageSize: 60, pageNo: 1 }).then(res1 => {
              if (res.data.errcode === 0) {
                item.downlist = res1.data.data.results
              } else {
                this.$Notice.error({ title: '查询失败' })
              }
            })
          })
          this.userControlType1.unshift(dic)
        } else {
          this.$Notice.error({ title: '查询失败' })
        }
      })
      getDictList({ type: 'supervise_start', pageSize: 30, pageNo: 1 }).then(res => {
        if (res.data.errcode === 0) {
          this.superviseDictList = JSON.parse(JSON.stringify(res.data.data.results))
          var dic2 = { 'label': '等于当前管控状态', 'value': '999' }
          this.superviseDictList.unshift(dic2)
          this.superviseDictList.unshift(dic)
          this.superviseDictListnow = JSON.parse(JSON.stringify(res.data.data.results))
          this.superviseDictListnow.unshift(dic)
          this.superviseDictListold = JSON.parse(JSON.stringify(res.data.data.results))
          var dic1 = { 'label': '新录入', 'value': '-1' }
          this.superviseDictListold.unshift(dic1)
          this.superviseDictListold.unshift(dic)
          // setTimeout(function () {
          //   that.selectlist()
          // }, 500)
        } else {
          this.$Notice.error({ title: '查询失败' })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getDict()
    this.getDownAddress(0, 1)
  }
}
</script>

<style scoped>
  .page_style {
    margin: 20px 5px;
  }

  .input-frame {
    width: 120px;
    margin-right: 10px;
  }

  .house-list > .group {
    background: white;
    padding: 10px;
    margin-top: 10px;
  }

  .house-list > .group > .item {
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 0;
  }

  .house-list > .group > .item .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .house-list > .group > .item .title {
    font-size: 14px;
    color: #333333;
  }

  .house-list > .group > .item .address {
    font-size: 12px;
    color: gray;
    display: flex;
    align-items: center;
  }

  .house-list > .group > .item .detail {
    font-size: 12px;
    color: dodgerblue;
  }

  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .opt-area-02 .left-con {
    font-size: 14px;
    width: 100%;
  }

  .opt-area-02 .left-con span {
    font-weight: bold;
  }

  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }

  .opt-area-02 .right-con .input-frame {
    width: 200px;
    margin-right: 10px;
  }

  .table-action-btn {
    margin-right: 3px;
  }

  .container >>> .ivu-btn-small {
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 3px;
  }

  .btn-action {
    margin-bottom: 10px;
  }

  .mp10 {
    margin-right: 10px;
  }
  .title-style {
    color: red;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .ivu-table-row {
    height: 57px;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .demo-spin-col{
    height: 100px;
    position: relative;
    /*border: 1px solid #eee;*/
  }
</style>
